<template>
    <div>
        <h1>课程管理页面</h1>
        <el-button type="text" @click="handleAddCourse">新增课程</el-button>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="课程名称" :label-width="formLabelWidth" prop="courseName">
                    <el-input v-model="form.courseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程描述" :label-width="formLabelWidth" prop="info">
                    <el-input v-model="form.info" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课时" :label-width="formLabelWidth" prop="count">
                    <el-input v-model="form.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程图片" :label-width="formLabelWidth" >
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/upImage/upload"
                            name="photo"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="form.pic" :src="form.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-upimage-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCourse">确 定</el-button><!--dialogFormVisible = false-->
            </div>
        </el-dialog>


        <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column label="序号" width="70" align="left">
                <template slot-scope="scope">
                    {{ (scope.$index+1)}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程名称"
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.courseName" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ row.courseName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="课时"
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.count" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ row.count }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="info"
                    label="课程描述"
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.info" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ row.info }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="teacher.name"
                    label="添加人"
                    width="120">
<!--                <template slot-scope="{row}">-->
<!--                    <el-form v-if="row.edit">-->
<!--                        <el-form-item>-->
<!--                            <el-input v-model="row.teacher.name" size="small"/>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                    <span v-else>{{ row.teacher.name}}</span>-->
<!--                </template>-->
            </el-table-column>
            <el-table-column
                    prop="pic"
                    label="课程图片"
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:8080/upImage/upload"
                                    name="photo"
                                    :show-file-list="false"
                                    :on-success="handleUpdateSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="row.pic" :src="row.pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-upimage-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <el-image v-else
                            style="width: 100px; height: 100px"
                            :src="row.pic"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="inputTime"
                    label="添加时间"
                    sortable
                    width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.inputTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    sortable
                    width="100">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.sort" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ row.sort }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200" :resizable="false">
                <template slot-scope="{row}">
                    <el-button v-if="row.edit"
                               type="success"
                               size="small"
                               icon="el-icon-check"
                               @click="checkEditSaveOk(row)"
                    >保存</el-button>
                    <el-button v-else
                               type="primary"
                               size="small"
                               icon="el-icon-edit"
                               @click="handleFindById(row)"
                    >编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(row)"
                            icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    export default {
        name: "ManageCourseListView",
        data() {
            return {
                tableData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    courseName: '',
                    count:'',
                    info:'',
                    sort: '0',
                    pic:'',
                },
                title:'',
                formLabelWidth: '100px',
                rules: {
                    courseName: [
                        {required: true, message: '请输入课程名称', trigger: 'blur'}
                    ],
                    count: [
                        {required: true, message: '请输入课程课时', trigger: 'blur'},
                        { type: 'number',
                            message: '请输入正整数',
                            trigger: 'blur',
                            transform (value) {
                                if (!/^[1-9]\d*$/.test(value)) {
                                    return true
                                }else{
                                }
                            }
                        }

                    ],
                    info: [
                        {required: true, message: '请输入课程描述', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {
            this.handleInitCourse();
        },
        methods: {
            //添加
            handleAddCourse(){
                this.dialogFormVisible = true;
                this.title = "添加课程";
            },
            checkEditSaveOk(row) {
                //console.log(row);
                this.$axios.post("/manage/course/save",row).then(response=>{
                    row.edit = !row.edit
                });
                /*row.edit = !row.edit*/
            },
            handleInitCourse() {
                this.$axios.get("/manage/course/list").then(response => {
                    const tableData = response.data.data;
                    for (var i in tableData) {
                        tableData[i]['edit']= false;
                    }
                    this.tableData = tableData;
                });
            },
            handleDelete(row){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(row.id);
                    this.$axios.get("/manage/course/delete",{params:{id: row.id}}).then(response => {
                        console.log(response);
                        if(response.data.code == 200){
                            /*this.tableData.splice(row,1);*/
                            this.handleInitCourse();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        else{
                            this.$message({
                                showClose: true,
                                message: '删除出错',
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addCourse() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        /*alert('submit!');*/
                        this.$axios.post("/manage/course/save",this.form).then(response=>{
                            if(response.data.code == 10001){
                                this.$message({
                                    showClose: true,
                                    message: '该角色名已存在',
                                    type: 'error'
                                });
                            }
                            else if(response.data.code == 200){
                                this.handleInitCourse();
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //添加图片上传成功
            handleAvatarSuccess(res, file) {
                console.log(res)
                // this.form.pic =  URL.createObjectURL(file.raw);
                this.form.pic = res.msg;
            },
            handleUpdateSuccess(res, file) {
                console.log(res)
                console.log(file)
                // this.form.pic =  URL.createObjectURL(file.raw);
                // row.pic = res.msg;
            },
            //图片上传之前的钩子
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //根据id查询
            handleFindById(row){
                this.$axios.get("/manage/course/findBy/"+row.id).then(response => {
                    console.log(response)
                    this.form = response.data.course;
                    this.title = "修改课程";
                    this.dialogFormVisible = true;

                })

            }

        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-upimage-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px!important;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>